<template>

  <div>
    <!-- 幻灯片 开始 -->
    <div v-swiper:mySwiper="swiperOption" >
        <div class="swiper-wrapper" >
            <div v-for="banner in bannerList" :key="banner.id" class="swiper-slide" style="background: #040B1B;">
                <a target="_blank" :href="banner.linkUrl">
                  <img height="100%"
                    :src="banner.imageUrl"
                    :alt="banner.title"/>
                </a>
            </div>

        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
    <!-- 幻灯片 结束 -->

     <div id="aCoursesList">
      <!-- 网校课程 开始 -->
      <div>
        <section class="container">
          <header class="comm-title">
            <h2 class="tac">
              <span class="c-333">资产服务系统</span>
            </h2>
          </header>
          <div>
            <article class="comm-asset-list">
              <ul class="of" id="bna">
                <li>
                  <div class="cc-l-wrap">
                    <section class="asset-img">
                      <img
                        src="~/assets/photo/asset/19c1d100222bd3f075cb5b12f4c514a2.jpeg"
                        class="img-responsive"
                        alt="资产借用"
                      >
                      <div class="cc-mask">
                        <a href="/asset" title="点击进入" class="comm-btn c-btn-1">点击进入</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a href="/asset" title="资产借用" class="asset-title fsize18 c-333">资产借用</a>
                    </h3>
                  </div>
                </li>
                <li>
                  <div class="cc-l-wrap">
                    <section class="asset-img">
                      <img
                        src="~/assets/photo/asset/fed26832b6337d768be53ae60fa492a6.jpeg"
                        class="img-responsive"
                        alt="资产归还"
                      >
                      <div class="cc-mask">
                        <a href="/asset_back" title="点击进入" class="comm-btn c-btn-1">点击进入</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a href="/asset_back" title="资产归还" class="asset-title fsize18 c-333">资产归还</a>
                    </h3>
                  </div>
                </li>
                <li>
                  <div class="cc-l-wrap">
                    <section class="asset-img">
                      <img
                        src="~/assets/photo/asset/01ccbe1e376083d1f8e3b675ff05fb5f.jpeg"
                        class="img-responsive"
                        alt="资产维修"
                      >
                      <div class="cc-mask">
                        <a href="/asset_repair" title="点击进入" class="comm-btn c-btn-1">点击进入</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a href="/asset_repair" title="资产维修" class="asset-title fsize18 c-333">资产维修</a>
                    </h3>
                  </div>
                </li>
                <li>
                  <div class="cc-l-wrap">
                    <section class="asset-img">
                      <img
                        src="~/assets/photo/asset/0a81894d2f8a507632ceb76ab2f7e434.jpeg"
                        class="img-responsive"
                        alt="资产申请"
                      >
                      <div class="cc-mask">
                        <a href="/asset_apply" title="点击进入" class="comm-btn c-btn-1">点击进入</a>
                      </div>
                    </section>
                    <h3 class="hLh30 txtOf mt10">
                      <a href="/asset_apply" title="资产申请" class="asset-title fsize18 c-333">资产申请</a>
                    </h3>
                  </div>
                </li>
              </ul>
              <div class="clear"></div>
            </article>
          </div>
        </section>
      </div>
      <!-- /网校课程 结束 -->
    </div>
  </div>
</template>

<script>
import banner from "@/api/banner"

export default {
  data () {
    return {
      swiperOption: {
       pagination: {
          el: '.swiper-pagination'//分页的dom节点
        },
        autoplay: {
          disableOnInteraction:false,
        }
      },
      bannerList: {}
    }
  },
  created() {
    this.initDataBanner()
  },
  methods:{
    initDataBanner() {
      banner.getList().then(response => {
        this.bannerList = response.data.data.bannerList
      })
    }
  }
}
</script>
